มาเตรียมคอมพิวเตอร์ของเราสำหรับการเรียน React กันเถอะ

เตรียมคอมพิวเตอร์ของเราสำหรับการเรียน React , prepare computer for learning React

Satang Temnithikul

2021.01.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

React คืออะไร

React คือ javaScript library สำหรับใช้ในการสร้าง user interfaces ที่พัฒนาโดย Facebook และ ชุมชนของนักพัฒนาที่เกี่ยวข้อง โดย React library จะนำมาใช้พัฒนาหน้าเว็บไซต์แบบ single-page application ( หน้าเว็บไซต์ที่ได้รับการออกแบบให้ลดการ reload ของหน้าเว็บโดยไม่จำเป็น ) พูดง่ายๆคือ React เป็นเหมือนเครื่องมือไว้สำหรับการสร้างระบบหน้าบ้าน ( front-end ) นั้นเอง

ซึ่งข้อดีหลักๆ ของการใช้ React คือ

☑ ช่วยให้การจัดการ files หรือ components ที่มีใน project ของเราได้ง่ายขึ้น
☑ ช่วยให้เราสามารถตรวจข้อผิดพลาดโปรแกรมได้ง่าย
☑ สามารถแก้ไข css หรือ js และ ตรวจสอบผลลัพธ์ได้ทันทีใน browser
☑ ช่วยให้สามารถ reuse code ได้อย่างมีประสิทธิภาพ

วิธีการสร้าง React App

Step 1 : ดาวน์โหลด และ ติดตั้ง node js สำหรับใช้ในสร้าง React project

โดยเข้าไปที่ https://nodejs.org/en/download/

กดดาวน์โหลดโดยเลือกเป็นแบบ LTS ( ในกรอบสีเหลือง )

Step 2 : เมื่อดาวน์โหลดและติดตั้ง node js เสร็จเรียบร้อยเราสามารถตรวจสอบได้โดย

พิมคำสั่ง node -v ใน command prompt

ถ้าติดตั้งสำเร็จจะมีผลลัพธ์ขึ้นแสดง version ของ node js ( ในกรอบสีเหลือง )

Step 3 : ให้เราไปที่ folder ที่เราต้องการสร้าง React App โดย

พิมคำสั่ง cd ‹path folder› ใน command prompt

จากภาพคือจะสร้างไว้ที่ C:\Users\cmth\Documents\react_hook

Step 4 : ให้เราสร้าง React App ใน folder ที่เราอยู่โดย

พิมคำสั่ง npm init react-app . ใน command prompt

รอจนกว่าจะติดตั้งเสร็จ

Step 5 : ให้เราตรวจสอบว่า React App ของเราสามารถรันได้มั้ยโดย

พิมคำสั่ง npm start ใน command prompt

จากนั้นให้ไปที่ url http://localhost:3000 ใน browser ของเรา

ถ้าขึ้นตามภาพก็แสดงว่าการสร้าง React App นั้นเสร็จเรียบร้อยพร้อมเรียนรู้ได้เลย

สรุป

จากการที่ผมได้ลองสร้างโปรเจค React App แล้วคิดว่าเป็น library ที่กินเนื้อที่น้อยมากและวิธีติดตั้งก็ไม่ยาก ก็หวังว่าทุกคนจะลองเอาไปติดตั้งดูเเละฝึกเขียน React กันนะครับ